<template>
  <div class="roi-view common-container common-scrollbar">
    <title-view icon="item-info" title="单个区域"> </title-view>
    <div class="area-view">
      <single-area :url="bgIcon" :list="singleList" :is-interest="false"></single-area>
    </div>
    <title-view icon="item-info" title="多个区域"></title-view>
    <div class="area-view">
      <more-area :url="bgIcon" :list="moreList" :is-interest="false"></more-area>
    </div>
  </div>
</template>

<script setup lang="ts">
import bgIcon from '@/assets/images/login-bg-white.png';

import MoreArea from './components/MoreArea.vue';
import SingleArea from './components/SingleArea.vue';

const singleList = [
  { x: 352, y: 21 },
  { x: 516, y: 49 },
  { x: 471, y: 159 },
  { x: 292, y: 134 },
];

const moreList = [
  [
    { x: 352, y: 21 },
    { x: 516, y: 49 },
    { x: 471, y: 159 },
    { x: 292, y: 134 },
  ],
  [
    { x: 503, y: 91 },
    { x: 681, y: 145 },
    { x: 625, y: 320 },
    { x: 347, y: 286 },
  ],
];
</script>

<style lang="less" scoped>
.roi-view {
  .area-view {
    height: 512px;
    background: #efefef;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    box-sizing: border-box;
  }
}
</style>
